import { Form, Row, Slider, Space, Tag } from 'antd';
import { values } from 'lodash';
import React, { Component } from 'react';
import { connect } from 'umi';

class SliderSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      SliderValue: props.initialValue,
    };
  }

  render() {
    const { SetFormItemValue, name, initialValue, dict } = this.props;
    const { SliderValue } = this.state;
    return (
      <>
        <Form.Item initialValue={initialValue} name={name} label={dict[`${name}`]}>
          <Slider
            range
            onChange={(value) => {
              this.setState({ SliderValue: value });
            }}
          />
        </Form.Item>
        <Space size={[0, 4]} wrap>
          <Tag color="green">
            一级污染：{SliderValue[0]} — {SliderValue[1]}
          </Tag>
          <Tag color="orange">
            二级污染：{SliderValue[1]} — {SliderValue[2]}
          </Tag>
          <Tag color="purple">
            三级污染：{SliderValue[2]} — {SliderValue[3]}
          </Tag>
          <Tag color="red">
            四级污染：{SliderValue[3]} — {SliderValue[4]}
          </Tag>
        </Space>
      </>
    );
  }
}

export default connect(({ global }) => ({
  dict: global.dict,
}))(SliderSelect);
